"use client";

import { useState } from "react";
import Image from "next/image";
import { CarImage} from "@/types";

interface CarMediaWallProps {
  media: CarImage[];
}

export default function CarMediaWall({ media }: CarMediaWallProps) {
  
  const [activeTab, setActiveTab] = useState<1 | 2 | 3>(1);

  // 过滤媒体数据
  const exteriorMedia = media.filter((m) => m.type === 1);
  const interiorMedia = media.filter((m) => m.type === 2);
  const videoMedia = media.filter((m) => m.type === 3);

  const getCurrentMedia = () => {
    switch (activeTab) {
      case 1:
        return exteriorMedia;
      case 2:
        return interiorMedia;
      case 3:
        return videoMedia;
      default:
        return exteriorMedia;
    }
  };

  const currentMedia = getCurrentMedia();

  return (
    <div className="space-y-6">
      {/* Tabs切换 */}
      <div className="flex justify-center">
        <div className="bg-white rounded-full p-1 shadow-lg">
          <div className="flex space-x-1">
            <button
              onClick={() => setActiveTab(1)}
              className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                activeTab === 1
                  ? "bg-blue-600 text-white shadow-md"
                  : "text-gray-600 hover:text-blue-600 hover:bg-gray-100"
              }`}
            >
              外观 ({exteriorMedia.length})
            </button>
            <button
              onClick={() => setActiveTab(2)}
              className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                activeTab === 2
                  ? "bg-green-600 text-white shadow-md"
                  : "text-gray-600 hover:text-green-600 hover:bg-gray-100"
              }`}
            >
              内饰 ({interiorMedia.length})
            </button>
            <button
              onClick={() => setActiveTab(3)}
              className={`px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
                activeTab === 3
                  ? "bg-purple-600 text-white shadow-md"
                  : "text-gray-600 hover:text-purple-600 hover:bg-gray-100"
              }`}
            >
              视频 ({videoMedia.length})
            </button>
          </div>
        </div>
      </div>

      {/* 媒体内容展示 */}
      <div className="bg-white rounded-lg shadow-sm border p-6">
        {currentMedia.length === 0 ? (
          <div className="text-center py-12">
            <div className="text-6xl mb-4">
              {activeTab === 1 ? "🚗" : activeTab === 2 ? "🛋️" : "🎥"}
            </div>
            <h4 className="text-xl font-semibold text-gray-900 mb-2">
              暂无{activeTab === 1 ? "外观" : activeTab === 2 ? "内饰" : "视频"}
              媒体
            </h4>
            <p className="text-gray-600">
              该车辆暂无
              {activeTab === 1 ? "外观" : activeTab === 2 ? "内饰" : "视频"}
              相关的图片或视频
            </p>
          </div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {currentMedia.map((item) => (
              <div key={item.id} className="group relative">
                {activeTab === 3 ? (
                  // 视频展示
                  <div className="relative aspect-video rounded-lg overflow-hidden bg-gray-100">
                    <video
                      src={item.url}
                      className="w-full h-full object-cover"
                      controls
                      poster={item.url.replace(".mp4", ".jpg")}
                    />
                    <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                      <div className="bg-white/20 backdrop-blur-sm rounded-full p-3">
                        <svg
                          className="w-8 h-8 text-white"
                          fill="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path d="M8 5v14l11-7z" />
                        </svg>
                      </div>
                    </div>
                  </div>
                ) : (
                  // 图片展示
                  <div className="relative aspect-video rounded-lg overflow-hidden bg-gray-100 cursor-pointer">
                    <Image
                      src={item.url}
                      alt="car"
                      fill
                      className="object-cover group-hover:scale-105 transition-transform duration-300"
                    />
                    <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                      <div className="bg-white/20 backdrop-blur-sm rounded-full p-2">
                        <svg
                          className="w-6 h-6 text-white"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                )}

                {/* 媒体信息 */}
                <div className="mt-2">
                  <p className="text-sm text-gray-600 truncate">item.alt</p>
                  <div className="flex items-center justify-between text-xs text-gray-500 mt-1">
                    <span>
                      {activeTab === 1
                        ? "外观"
                        : activeTab === 2
                        ? "内饰"
                        : "视频"}
                    </span>
                    {/* <span>{item.isPrimary && "主图"}</span> */}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 媒体统计信息 */}
      <div className="bg-gradient-to-r from-blue-50 to-green-50 rounded-lg p-6">
        <h3 className="text-lg font-semibold mb-4 text-gray-800">媒体统计</h3>
        <div className="grid grid-cols-3 gap-4 text-center">
          <div className="bg-white rounded-lg p-4 shadow-sm">
            <div className="text-2xl font-bold text-blue-600">
              {exteriorMedia.length}
            </div>
            <div className="text-sm text-gray-600 mt-1">外观图片</div>
          </div>
          <div className="bg-white rounded-lg p-4 shadow-sm">
            <div className="text-2xl font-bold text-green-600">
              {interiorMedia.length}
            </div>
            <div className="text-sm text-gray-600 mt-1">内饰图片</div>
          </div>
          <div className="bg-white rounded-lg p-4 shadow-sm">
            <div className="text-2xl font-bold text-purple-600">
              {videoMedia.length}
            </div>
            <div className="text-sm text-gray-600 mt-1">视频资源</div>
          </div>
        </div>
      </div>
    </div>
  );
}
